<template>
    <sc-dialog title="人脸采集" v-model="propValue" custom-class="getFaceFromPopup" width="900px" @close="_close" @closed="$refs['ruleForm'].resetFields()">
        <div class="dialog-content pr500 pl30 pt20">
            <el-form ref="ruleForm" :model="form" label-width="110px" :rules="rules">
                <el-form-item prop="faceImg">
                    <div v-if="!faceImg" class="get-face flex-col-c-c" @click="$emit('openFacePopup')">
                        <i class="saasIcon">&#xe636;</i> <span>点击采集</span>
                    </div>
                    <div v-else class="face-img">
                        <img :src="faceImg" />
                        <span class="saasIcon" @click.stop="$emit('clearFaceImg')">&#xe693;</span>
                    </div>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="班级" prop="class">
                    <el-select v-model="form.class" @change="selectClass">
                        <el-option v-for="(item, index) in classOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" :options="sexOptions" @change="selectSex">
                        <el-option v-for="(item, index) in sexOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="medium" type="primary" @click="onSubmit">提交</el-button>
            <el-button size="medium" @click="_close">取消</el-button>
        </span>
    </sc-dialog>
</template>
<script>
import GetFacePopup from "./getFacePopup"; //采集人脸中
export default {
    name: "getFaceFromPopup",
    components: {
        GetFacePopup,
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        data: {
            type: Object,
            default: () => ({}),
        },
        faceImg: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            popup: {
                getFace: false, //采集人脸中
            },
            form: {
                faceImg: "",
                name: "",
                class: "",
                sex: "",
            },
            rules: {
                faceImg: {
                    required: true,
                    message: "请抓取人脸",
                    trigger: "blur",
                },
                name: [
                    {
                        required: true,
                        message: "姓名不能为空",
                        trigger: "blur",
                    },
                    // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                ],
                class: {
                    required: true,
                    message: "请选择年级",
                    trigger: "change",
                },
                sex: {
                    required: true,
                    message: "请选择性别",
                    trigger: "change",
                },
            },
            //班级选择
            classOptions: [
                {
                    value: "八年级一班",
                    label: "八年级一班",
                },
                {
                    value: "七年级二班",
                    label: "七年级二班",
                },
                {
                    value: "七年级三班",
                    label: "七年级三班",
                },
            ],
            sexOptions: [
                {
                    value: 1,
                    label: "男",
                },
                {
                    value: 2,
                    label: "女",
                },
            ],
        };
    },
    computed: {
        propFaceImg: {
            get() {
                this.form.faceImg = this.faceImg;
            },
        },
        propValue: {
            get() {
                return this.value;
            },
            set(nval) {
                this.$emit("input", nval);
            },
        },
        propData: {
            get() {
                return this.data;
            },
        },
    },
    methods: {
        // 选择地址
        selectClass(value) {
            console.log(value);
        },
        // 选择地址
        selectSex(value) {
            console.log(value);
        },

        onSubmit() {
            this.$refs["ruleForm"].validate((valid) => {
                if (valid) {
                    alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //关闭弹窗
        _close() {
            this.$emit("input", false);
        },
    },
};
</script>
<style lang="scss" scoped>
.getFaceFromPopup {
    .dialog-content {
        .get-face {
            height: 200px;
            width: 200px;
            background-color: rgba(249, 249, 249, 1);
            box-sizing: border-box;
            border-width: 1px;
            border-style: solid;
            border-color: rgba(233, 233, 233, 1);
            border-right: 8px;
            color: $t-color-2;
            cursor: pointer;
            .saasIcon {
                margin-top: 20px;
                color: $t-color-2;
                font-size: 80px;
            }
            span {
                font-size: 20px;
                font-width: bold;
                margin-top: 30px;
            }
        }
        .face-img {
            position: relative;
            width: 200px;
            img {
                width: 200px;
            }
            .saasIcon {
                cursor: pointer;
                position: absolute;
                right: -13px;
                top: -18px;
                font-size: 40px;
                font-weight: bold;
                color: #dc5858;
            }
        }
    }
}
</style>
